<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 如何让obj变成一个响应式数据？
        // effect函数执行 => 触发obj的读取操作 => 拦截obj的读取，把effect函数存储到桶里
        // 修改obj.text => 触发obj的设置操作 => obj设置时，从桶里面拿出effect函数再次执行
        let data = {
            text: '我是text文本'
        }
        // 用一个全局变量存储被注册的副作用函数
        let activeEffect;
        function effect (fn) {
            // 调用注册函数 存储fn给activeEffect
            activeEffect = fn
            // 执行副作用函数
            fn()
        }
        const bucket = new Set()
        const obj = new Proxy(data, {
            get(target, key) {
                // 副作用函数加到桶里面去 => 不依赖具体的函数名 
                if (activeEffect) {
                    bucket.add(activeEffect)
                }
                return target[key]
            },
            set(target, key, newVal) {
                target[key] = newVal
                // 但无论obj的哪个属性触发，都会导致这里的副作用函数执行
                bucket.forEach(fn => fn())
                return true
            }
        })
        effect(
            () => {
                console.log('effect runs');
                document.body.innerText = obj.text
            }
        )
        // 如下代码执行，会触发副作用函数的更新, 但是其实不应该触发，
        setTimeout(() => {
            obj.notExist = '333'
        }, 2000)
    </script>
</body>
</html>